<template>
  <view class="navbar" :style="{ backgroundColor: bgColor }">
    <view class="fixed-content">
      <!-- 状态栏高度 -->
      <view v-if="showStatusbar" :style="{'height': geStatusBarHeight() + 'px'}"></view>
      <view style="height: 4rpx"></view>
      <!-- 导航栏高度 -->
      <view v-if="showNavbar" class="bar-content" :style="{'height': getNavBarHeight()+'px'}">
        <view class="nav-left" @tap="navigateBack()" v-if="showBack">
<!--          <image src="/static/img/common/arrow-left.png" mode=""></image>-->
          <u-icon  name="arrow-left" size="32"></u-icon>
        </view>
        <view class="nav-title font-14">{{ title }}</view>
        <slot></slot>
      </view>
    </view>
    <!-- 占位高度，状态栏高度+导航栏高度，父组件就不需要计算导航栏高度 -->
<!--    <view :style="{'height': geStatusBarHeight() + getNavBarHeight() + 'px'}"></view>-->
  </view>
</template>
<script>
export default {
  name:'Navbar',
  props:{
    bgColor: {
      type: String,
      default:''
    },
    title:{
      type: String,
      default:''
    },
    showNavbar: {
      type: Boolean,
      default: true
    },
    showStatusbar: {
      type: Boolean,
      default: true
    },
    showBack: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    // 获取状态栏高度
    geStatusBarHeight(){
      // #ifdef MP-WEIXIN
      return uni.getSystemInfoSync().statusBarHeight
      // #endif
      // #ifdef H5
      return 0
      // #endif
    },
    // 获取导航栏高度
    getNavBarHeight(){
      // #ifdef MP-WEIXIN
      const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
      const systemInfo = uni.getSystemInfoSync()
      // 导航栏高度 = 胶囊高度 + 上下间距（胶囊到状态栏的距离 * 2）
      return menuButtonInfo.height + (menuButtonInfo.top - systemInfo.statusBarHeight) * 2
      // #endif
      // #ifdef H5
      return 0
      // #endif
    },
    navigateBack(){
      uni.navigateBack()
    }
  }
}
</script>
<style lang="scss" scoped>
.navbar{
  .fixed-content {
    .bar-content{
      display: flex;
      align-items: center;
      position: relative;
      padding: 0 24rpx;

      .nav-left{
        width: 44rpx;
        height: 44rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        image {
          width: 22px;
          height: 22px;
        }
      }

      .nav-title{
        flex: 1;
        color: #171A1D;
        text-align: center;
        font-size: 32rpx;
        font-weight: 500;
      }
    }
  }
}
</style>
